<template>
  <div class="like">
    <div class="like-header">
      <span class="iconfont icon-aixin1"></span>
      <span>猜你喜欢</span>
    </div>
    <div class="like-body" v-for="item in objList" :key="item.id">
      <div class="like-left">
        <img :src="item.src" />
      </div>
      <div class="like-right">
        <p>{{item.tourismName}}</p>
        <p>{{item.nums}}</p>
        <div>
          <p>
            {{item.price}}
            <span>起</span>
          </p>
          <p>{{item.address}}</p>
        </div>
      </div>
    </div>
    <div class="allItem">
      <a href="#">查看所有产品</a>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      objList: [
        {
          id: 0,
          tourismName: '金湖景区',
          nums: '1314条评论',
          price: '￥18.8',
          address: '平台区',
          src:
            '//img1.qunarzz.com/sight/p0/2011/e6/e6568888096dd6f3a3.water.jpg_256x160_de993244.jpg'
        },
        {
          id: 1,
          tourismName: '植物公园',
          nums: '13784条评论',
          price: '￥98.8',
          address: '故台区',
          src:
            '//img1.qunarzz.com/sight/p0/1902/f2/f2e0213052717f7ca3.water.jpg_256x160_a2a2f8d3.jpg'
        },
        {
          id: 2,
          tourismName: '长隆游乐园',
          nums: '1322条评论',
          price: '￥108.8',
          address: '小韩区',
          src:
            '//img1.qunarzz.com/sight/p0/2011/e6/e6568888096dd6f3a3.water.jpg_256x160_de993244.jpg'
        },
        {
          id: 3,
          tourismName: '世界之窗',
          nums: '1388条评论',
          price: '￥128.8',
          address: '顾台区',
          src:
            '//img1.qunarzz.com/sight/p0/1807/f3/f3a998c29724c22aa3.water.jpg_256x160_23f3118d.jpg'
        },
        {
          id: 4,
          tourismName: '岭南天地',
          nums: '1554条评论',
          price: '￥198.8',
          address: '光明区',
          src:
            'http://img1.qunarzz.com/sight/p0/1608/48/48b8263228455544a3.water.jpg_200x200_099c8b45.jpg'
        },
        {
          id: 5,
          tourismName: '顺德欢乐海岸plus',
          nums: '2699条评论',
          price: '￥98.8',
          address: '光明区',
          src:
            'http://img1.qunarzz.com/sight/p0/1909/78/78946546c055f91fa3.img.jpg_200x200_f99f107e.jpg'
        }
      ]
    }
  }
}
</script>

<style scoped>
.like {
  background: #fff;
}
.like-header {
  margin: 0.2rem 0;
}
.like-header > span:nth-of-type(1) {
  color: red;
  font-size: 0.4rem;
  margin: 0 0.1rem;
}
.like-header > span:nth-of-type(2) {
  font-size: 0.32rem;
  color: #333;
  font-weight: 600;
}
/* like body */
.like-body {
  display: flex;
  padding-bottom: 0.2rem;
  border-bottom: 0.02rem solid #ccc;
  margin: 0.2rem 0;
}
.like-left {
  flex: 3;
  margin: 0 0.2rem;
}
.like-left img {
  width: 90%;
  height: 1.6rem;
  border-radius: 0.1rem;
}
.like-right {
  flex: 7;
}
.like-right > p:nth-of-type(1) {
  font-size: 0.3rem;
  font-weight: 600;
  color: #333;
  margin: 0.04rem 0.1rem;
}
.like-right > p:nth-of-type(2) {
  font-size: 0.28rem;
  color: #333;
  margin: 0.04rem 0.1rem;
}
.like-right > div {
  display: flex;
  justify-content: space-between;
  margin: 0 0.1rem;
  font-size: 0.3rem;
  color: #333;
}
.like-right > div > p:nth-of-type(1) {
  font-weight: 600;
  color: red;
}
.like-right > div > p:nth-of-type(1) > span {
  font-size: 0.24rem;
}
/* 查看所有 */
.allItem {
  text-align: center;
  line-height: 0.32rem;
  font-size: 0.32rem;
  width: 100%;
  height: 0.32rem;
  color: rgb(0, 183, 215);
  padding-bottom: 0.2rem;
}
</style>
